<script setup lang="ts">
import {
  getArtistDesc,
  getArtistDetail,
  getArtistFans,
} from "@/apis/artist/artist";
import type { ArtistData } from "@/types/artist";
import { el } from "element-plus/es/locales.mjs";
import { onBeforeMount, ref } from "vue";
import { useRoute } from "vue-router";
import MusicList from "@/components/MusicList.vue";
const route = useRoute();
const artistData = ref<ArtistData>();
const artistFollowCount = ref<number>(0);
const artistDesc = ref<string>("");
onBeforeMount(async () => {
  const res = await getArtistDetail({ id: Number(route.query.id) });
  artistData.value = res.data.data;
  const artistFans = await getArtistFans({ id: Number(route.query.id) });
  artistFollowCount.value = artistFans.data.data.fansCnt;
});
const activeName = ref("songs");
</script>
<template>
  <div class="Artist">
    <el-card>
      <div class="artistInfo">
        <el-avatar
          :src="artistData?.artist.cover"
          :size="200"
          shape="square"
          fit="cover"
        ></el-avatar>
        <div class="artistDesc">
          <h1>
            {{ artistData?.artist.name }}({{ artistData?.artist.alias[0] }})
          </h1>
          <p>{{ artistData?.identify.imageDesc }} &nbsp;&nbsp; {{}}</p>
          <p class="artistFans">
            粉丝:&nbsp;{{ (artistFollowCount / 10000).toFixed(4) }}万
          </p>
        </div>
      </div>
    </el-card>
    <el-card class="artistWorks">
      <el-tabs v-model="activeName" class="ArtistWorksTab" tabPosition="left">
        <el-tab-pane label="歌曲" name="songs">
          <MusicList :artistId="artistData?.artist.id"></MusicList>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="albums">专辑</el-tab-pane>
        <el-tab-pane label="MV" name="mv">MV</el-tab-pane>
        <el-tab-pane label="介绍" name="desc">介绍</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.el-card {
  border-radius: 10px;
}
.artistWorks {
  margin-top: 20px;
}
.artistInfo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  .el-avatar {
    flex-shrink: 0;
  }
  .artistDesc {
    // display: inline;
    height: 200px;
    display: flex;
    flex-direction: column;
    // justify-content: start;
    align-items: start;
    row-gap: 25px;
    justify-content: start;
    // flex-shrink: 0;
    h1 {
      font-size: 30px;
      font-weight: 600;
    }
    .artistFans {
      font-size: 12px;
    }
  }
}
</style>
